<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>5秒钟后自动跳转页面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      text-align: center;
      background-color: #4ba46d;
      border-radius: 20px;
      width: 300px;
      height: 350px;
      line-height: 350px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    var div = document.querySelector('div')
    var time = 5
    fn()
    setInterval(fn, 1000)

    function fn () {
      if (time === 0) {
        location.href = 'https://www.bilibili.com'
      } else {
        div.innerHTML = '您将在' + time + '秒后跳转哔哩哔哩'
        time--
      }
    }
  </script>

<!--    也可以先在div里写好，计时从4开始就是了-->
<!--    <div>您将在5秒后跳转哔哩哔哩</div>-->
<!--    <script>-->
<!--      var div = document.querySelector('div')-->
<!--      var time = 4-->
<!--      setInterval(fn, 1000)-->

<!--      function fn () {-->
<!--        if (time === 0) {-->
<!--          location.href = 'https://www.bilibili.com'-->
<!--        } else {-->
<!--          div.innerHTML = '您将在' + time + '秒后跳转哔哩哔哩'-->
<!--          time&#45;&#45;-->
<!--        }-->
<!--      }-->
</body>
</html>